<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/js/jquery-1.9.1.js"></script>
<script src="../jquery/js/jquery-ui-1.10.3.custom.js"></script>
<link href="../jquery/css/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link rel="stylesheet" href="../jquery/themes/base/jquery.ui.all.css">
<script src="../jquery/ui/jquery.ui.core.js"></script>
<script src="../jquery/ui/jquery.ui.widget.js"></script>
<script src="../jquery/ui/jquery.ui.position.js"></script>
<script src="../jquery/ui/jquery.ui.menu.js"></script>
<script src="../jquery/ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="css/demos.css">
<script type="text/javascript">
$(function(){
	function log(message){
		$("<div>").text(message).prependTo("#log");
		$("#log").scrollTop(0);
	}
	$("#city").autocomplete({
		source:function(request,response){
			$.ajax({
				url:"http://ws.geonames.org/searchJSON",
				dataType:"jsonp",
				data:{
					featureClass:"P",
					style:"full",
					maxRows:12,
					name_startsWith:request.term
				},
				success:function(data){
					response($.map(data.geonames,function(item){
						return{
							label:item.name+(item.adminName1?", "+item.adminName1:"")+", "+item.countryName,
							value:item.name
						};
					}));
				}
			});
		},
		minLength:2,
		select:function(event,ui){
			log(ui.item ?
				"Selected: "+ui.item.label :
				"Nothing selected, input was "+this.value);
		},
		open:function(){
			$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
		},
		close:function(){
			$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
		}
	});
});
</script>
<style>
body {
	font:62.5% "Trebuchet MS", sans-serif;
	margin:64px;
}
#h2-caption {
	font:20px "Trebuchet MS", sans-serif;
}
.demoHeaders {
	margin-top:2em;
}
#div-log {
	font:13.5px "Trebuchet MS", sans-serif;
}
</style>
<style>
	.ui-autocomplete-loading {
		background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
	}
	#city { width: 25em; }
	</style>
<title>超实用的jQuery代码段</title>
</head>
<body>
<h2 id="h2-caption">超实用的jQuery代码段 - jQuery实现远程JSON数据源用户输入自动完成</h2>
<!-- Autocomplete -->
<h2 class="demoHeaders">实现远程JSON数据源用户输入自动完成</h2>

<div class="ui-widget">
	<label for="city">Your city: </label>
	<input id="city">
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div>
<br/>
<div id="div-log">
	<p>日志记录：</p>
</div>
</body>
</html>